<!-- @format -->
<script setup lang="ts">
// 背景图片
// bg_img: "/assets/bg_user.png",
// 账户信息
const user_info: { username: string; profile: string; phone: string } = {
    // 用户名
    username: "六七",
    // 头像资源链接
    profile: "/static/profile.jpg",
    // 电话号码（遮盖）
    phone: "186****8888",
};
// 资产预览
const user_assets: {
    order: number;
    title: string;
    value: string;
    link: string;
}[] = [
    {
        order: 1,
        title: "余额",
        value: "0.00",
        link: "/pages/user-assets/user-assets?current=balance",
    },
    {
        order: 2,
        title: "积分",
        value: "0",
        link: "/pages/user-assets/user-assets?current=member-points",
    },
    {
        order: 3,
        title: "卡",
        value: "0",
        link: "/pages/user-assets/user-assets?current=member-card",
    },
    {
        order: 4,
        title: "优惠券/码",
        value: "0",
        link: "/pages/user-assets/user-assets?current=discount-coupon",
    },
];
// 订单选项
const order_opts: {
    order: number;
    title: string;
    icon: string;
    link: string;
}[] = [
    {
        order: 1,
        title: "待付款",
        icon: "pending-payment",
        link: "/pages/orders/orders?current=obligation",
    },
    {
        order: 2,
        title: "待发货",
        icon: "pending-delivery",
        link: "/pages/orders/orders?current=obligation",
    },
    {
        order: 3,
        title: "待收货",
        icon: "pending-receive",
        link: "/pages/orders/orders?current=obligation",
    },
    {
        order: 4,
        title: "待评价",
        icon: "pending-comment",
        link: "/pages/orders/orders?current=obligation",
    },
    {
        order: 5,
        title: "退换/售后",
        icon: "after-sale",
        link: "/pages/orders/orders?current=obligation",
    },
];
// 其它选项
const other_opts: {
    order: number;
    title: string;
    icon: { color: string; size: string; type: string };
    link: string;
}[] = [
    {
        order: 3,
        title: "账号设置",
        icon: {
            color: "#000",
            size: "22",
            type: "gear",
        },
        link: "/pages/user-account/user-account",
    },
    {
        order: 1,
        title: "收货地址",
        icon: {
            color: "#000",
            size: "22",
            type: "location",
        },
        link: "/pages/user-address/user-address",
    },
    {
        order: 2,
        title: "个人信息",
        icon: {
            color: "#000",
            size: "22",
            type: "person",
        },
        link: "/pages/user-info/user-info",
    },
];
</script>

<template>
    <page class="user">
        <!-- <page-meta></page-meta> -->
        <!-- <navigation-bar></navigation-bar> -->
        <background>user</background>
        <!-- 会员卡 -->
        <container class="member flex-col glass">
            <!-- header -->
            <uni-list class="item" :border="false">
                <uni-list-item
                    :title="user_info.username"
                    :note="user_info.phone"
                    :thumb="user_info.profile"
                    thumb-size="lg"
                    rightText="会员码"
                    >用户信息</uni-list-item
                >
            </uni-list>
            <!-- content -->
            <!-- footer -->
        </container>
        <!-- 账户资产 -->
        <container class="assets flex jc-sa">
            <navigator
                class="item flex-col jc-sa"
                v-for="item in user_assets"
                :url="item.link"
                :render-link="false"
            >
                <text class="data">{{ item.value }}</text>
                <text class="title">{{ item.title }}</text>
            </navigator>
        </container>
        <!-- 订单选项 -->
        <container class="order flex-col">
            <uni-list :border="false" class="nav item">
                <uni-list-item
                    title="我的订单"
                    link
                    to="/pages/orders/orders"
                ></uni-list-item>
            </uni-list>
            <view class="list item flex jc-sa">
                <navigator
                    class="flex-col jc-sa"
                    v-for="item in order_opts"
                    :url="item.link"
                    :render-link="false"
                >
                    <uni-icons
                        :class="`iconfont icon-${item.icon}`"
                        size="28"
                    ></uni-icons>
                    <text class="icon title">{{ item.title }}</text>
                </navigator>
            </view>
        </container>
        <!-- 更多选项 -->
        <uni-list class="opts container options">
            <uni-list-item
                class="item"
                v-for="item in other_opts"
                :show-extra-icon="true"
                :extra-icon="item.icon"
                :title="item.title"
                link
                :to="item.link"
            ></uni-list-item>
        </uni-list>
        <!-- <custom-tab-bar></custom-tab-bar> -->
        <!-- <page-container></page-container> -->
    </page>
</template>

<style lang="scss"></style>
